<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../lib/vue2.5.15.js"></script>
</head>
<body>
<div id="app">
    <h1>计算属性</h1>
    <div>
        姓：<input type="text" placeholder="FirstName" v-model="FirstName"><br>
        名：<input type="text" placeholder="LastName" v-model="LastName"><br>
        全名1：<input type="text" placeholder="FullName1" v-model="FullName"><br>
        全名2：<input type="text" placeholder="FullName" v-model="WatchFullName"><br>
        全名3：<input type="text" placeholder="FullName" v-model="FullNameDouble"><br>
    </div>
</div>
</body>
<script>
    const vm = new Vue(
        {
            el: "#app",
            data: {
                msg: "Hello! Vue",
                FirstName: "A",
                LastName: "B",
                WatchFullName: ""
            },
            methods: {},
            computed: {
                FullName() {
                    return this.FirstName + " " + this.LastName
                },
                FullNameDouble: {
                    //回调函数 计算并返回当前计算属性的值
                    // 回调函数要满足的三个条件
                    // 1、开发者自定义 2、开发者代码里并未体现有调用 3、回调函数最终执行
                    // 需要读取当前属性值的时候回调
                    get() {
                        return this.FirstName + " " + this.LastName
                    },
                    // 属性值发生变化时回调，更新相关的属性数据
                    set(value) {
                        const names = value.split(' ');
                        this.FirstName = names[0];
                        this.LastName ='';
                        if(names[1]){
                            this.LastName = names[1]
                        }
                    }
                }
            },
            watch: {
                FirstName: function (newVal, oldVal) {
                    this.WatchFullName = newVal + " " + this.LastName
                },
                /*LastName:function(newVal){
                    this.WatchFullName = this.FirstName+" "+newVal
                }*/
            }
        }
    )
    //watch的第二种写法
    vm.$watch('LastName', function (value) {
        // console.log("watch的第二种写法")
        this.WatchFullName = this.FirstName + " " + value
    })
</script>

</html>